<template>
	<tm-fullView>
		<tm-menubars title="评分" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24 ">默认</view>
			<tm-rate @change="change" v-model="rate" color="blue"></tm-rate>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">数量</view>
			<tm-rate v-model="rate" :num="10" color="blue"></tm-rate>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">主题色，自定义图标</view>
			<tm-rate icon="icon-QQ" v-model="rate" :num="5" color="blue"></tm-rate>
			
		</tm-sheet>
		
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">禁用，无法点击，只读状态</view>
			<tm-rate :disabled="true" v-model="rate" :num="5" color="grey"></tm-rate>
			
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">大小间隙，显示评分</view>
			<tm-rate v-model="rate" :num="10" :size="22" :margin="8" :show-num="true"></tm-rate>
			<view class="text-size-s text-weight-b mb-24 mt-24">自定义插槽数据</view>
			<tm-rate color="red" v-model="rate" :num="10" :size="22" :margin="8" :show-num="true">
				<template v-slot:default="{num}">
					<text class="text-size-xxs text-red">我的分数:{{num}}</text>
				</template>
			</tm-rate>
		</tm-sheet>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"

	import tmRate from "@/tm-vuetify/components/tm-rate/tm-rate.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmRate},
		data() {
			return {
				rate:0
			}
		},
		methods: {
			change(e){
				console.log(`当前评分为：${e}`);
			}
		}
	}
</script>

<style>

</style>
